<!-- 页面：例如 pages/index/index.vue -->
<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>

	<view class="parent-container">

		<!-- 顶部 tab 切换 -->
		<view class="select-tab">
			<view class="tab-buttons">
				<button v-for="(item, index) in tabList" :key="item.id" class="tab-btn" :class="{
					'left-btn': index === 0,
					'right-btn': index === 1,
					active: activeTab === item.id
				}" @click="activeTab = item.id">
					<text class="text12">{{ item.title }}</text>
				</button>
			</view>
		</view>
		<HuodongList :list="list" />
		<!-- 	<view class="list">
			<view class="list-item" v-for="item in list" :key="item.id" @click="navigationUrl(item)">
		 
				<view class="item-left">
					<image class="img " :src="item.photo" mode="aspectFill"></image>
				</view>

			 
				<view class="item-content">
					<text class="item-title text12">{{ item.title }}</text>
					<text class="item-desc text11">{{ item.location }}</text>
					<view class="item-link">
						<text class="item-desc text11">{{ item.date }}</text>
							<wd-button size="small" v-if="activeTab==0?true:false">
					<text>报名</text>
			 
					</wd-button>
					</view>
				</view>

 
			</view>
		</view> -->
	</view>
	<TabComponent :tabs="currentTabs" @change="onTabChange" />

</template>

<script setup>

import {
	tabActivity
} from "@/api/volunteer"

import HuodongList from "@/components/huodong-list/index"
import { onShow } from '@dcloudio/uni-app';


import {
	ref,
	getCurrentInstance,
	onMounted,
	computed,
	watch,
	nextTick
} from 'vue';
import {
	useRouter
} from 'uni-mini-router'

import {
	useFontSizeStore
} from '@/stores/fontSizeStore';
import {
	useTabStore
} from '@/stores/tabs'
import {
	ROLE_TABS
} from "@/config/roles"
import TabComponent from '@/components/tab-bar/index.vue'

import { useShare } from '@/utils/useShare';
import { getAppEnum } from "@/utils/appDataEnum"


// 配置分享内容
const { onShareAppMessage, onShareTimeline } = useShare({
	title: '欢迎',
	path: 'pages/tabPage/doctor/doctor_home', // 当前页面路径
	imageUrl: '/static/share-cover.jpg',
	query: '' // 朋友圈参数（可选）
});


const fontSizeStore = useFontSizeStore();
const tabStore = useTabStore()
const router = useRouter();


// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
	const role = getApp()[getAppEnum.CurrentRole];
	return ROLE_TABS[role]?.tabs
})

// ✅ Tab 点击处理
const onTabChange = (tab) => {
	nextTick(() => {
		router.pushTab({
			name: tab.key
		})
	})
}




// Tab 列表
const tabList = ref([{
	title: '未开始活动',
	id: 0
},
{
	title: '历史活动',
	id: 1
}
])

// 当前激活 Tab
const activeTab = ref(0)
// 列表数据
const list = ref([])

const loadData = (value) => {
	tabActivity({
		id: 0,
		type: value
	}).then((res) => {
		if (res.code == 200) {
			list.value = res.data;
		}
	})
}

const navigationUrl = (item) => {
	console.log("item:", item)
	router.push({
		name: "volunteer_activityDetail",
		params: {
			id: item.id,
			type: activeTab.value
		}
	})
}


 


// 2. 新增：监听 activeTab 的变化，触发数据加载
watch(activeTab, (newTabValue) => {
	// 当 activeTab 改变时，用新值调用 loadData
	loadData(newTabValue)
})



// 模拟数据（新增 desc 字段）
onMounted(() => {
 
	loadData(activeTab.value)
})
</script>

<style scoped lang="less">
@import '@/static/styles/colors.less';
@import '@/static/styles/constants.less';
@import url('@/static/styles/family/onlineSupermarket/tab-select.less');

@icon-color: #007aff; // 图标主题色
@text-color: #333; // 文字颜色
@item-height: 140rpx; // 增加高度以容纳详情
@border-color: #e5e5e5;

.item-link {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.select-tab {
	margin-top: 0rpx;
}

.list {
	padding: 0 30rpx;
}

.list-item {
	display: flex;
	align-items: center;
	// height: @item-height;
	border-radius: @layout-border-radius-sm;
	padding: 0rpx 20rpx;
	margin-bottom: 20rpx;
	background-color: #fff;
	// border: 1rpx solid @color-border-dark;
	position: relative;

	&:active {
		transform: scale(0.98);
		opacity: 0.8;
	}

	.item-left {
		flex: 0 0 140rpx;
		text-align: center;
		height: 140rpx;
		margin-right: 24rpx;
		background-color: red;
		padding: 20rpx 0;
		background-color: #fff;

		.img {
			width: 100%;
			height: 100%;
		}

	}

	.item-content {
		flex: 1;
		overflow: hidden;
		flex-direction: column;
	}

	.item-title {
		font-size: @h5-size;
		color: @color-text-dark;
		font-weight: 500;
		line-height: 1.4;
		display: block;
	}

	.item-desc {
		font-size: @h6-size;
		color: @color-text-secondary;
		line-height: 1.4;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 4rpx;
	}

	.item-arrow {
		// font-size: 36rpx;
		color: @color-text-placeholder;
		margin-left: auto;
		transform: rotate(0deg);
		transition: transform 0.3s;
	}
}
</style>